<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!--添加的表单-->
<form class="layui-form" action=""  style="display: none;padding: 15px"  id="addForm">
    <div class="layui-form-item">
        <label class="layui-form-label">菜品类别</label>
        <div class="layui-input-block">
            <input type="text" name="tname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="addBtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>



<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>



<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
    </div>
</script>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['table', 'dropdown'], function() {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.$;
        var form = layui.form;



        // 表单的提交事件监听(添加)
        form.on('submit(addBtn)', function(data){
            var field = data.field; // 获取表单字段值
            $.ajax({
                url:"/type/",
                method:"post",
                contentType:"application/json",
                data:JSON.stringify(field),
                dataType:"json",
                success:function(res){
                    layer.msg(res.msg);
                    layer.closeAll();
                    table.reload("test",{})
                }
            })
            return false; // 阻止默认 form 跳转
        });



        // 表格渲染
        table.render({
            elem: '#test',
            url: '/type/', // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
            height: 'full-35', // 最大高度减去其他容器已占有的高度差
            cellMinWidth: 80,
            page: true,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, totalRow: '合计：'},
                {field: 'tname', width: 120, title: '菜品类别'},
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo'}
            ]],

        });


        // 头部工具栏事件监听
        table.on('toolbar(test)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch(obj.event){
                case 'add':
                    // 在此处输入 layer 的任意代码
                    layer.open({
                        type: 1, // page 层类型
                        area: ['500px', '300px'],
                        title: '添加',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: true, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: $("#addForm")
                    });
                    break;

            };
        });


        // 行内工具栏事件监听
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if (obj.event === 'edit') {
                layer.open({
                    title: '编辑 - id:' + data.id,
                    type: 1,
                    area: ['80%', '80%'],
                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                });
            } else if (obj.event === 'more') {

            }
        });
    });

</script>
</body>
</html>